<template>
  <div>
    <!-- 子应用容器 -->
    <div id="subapp-container"></div>
  </div>
</template>

<script setup>
import {onMounted, onUnmounted, ref, nextTick} from 'vue';
import {start} from 'qiankun'; // 确保已导入 start

let started = false; // 标记 qiankun 是否已启动，避免重复启动

onMounted(() => {
  // 使用 nextTick 确保 DOM 已更新，容器已存在
  nextTick(() => {
    const container = document.getElementById('subapp-container');
    if (container && !started) {
      console.log('容器已找到，启动 qiankun');
      // 建议添加一些启动配置，例如关闭预加载
      start({
        prefetch: false, // 根据需要设置
        sandbox: {experimentalStyleIsolation: true} // 可选样式隔离
      });
      started = true;
    } else if (!container) {
      console.error('错误: 未找到 #subapp-container 元素');
      // 可以添加重试机制或错误提示
    }
  });
});

onUnmounted(() => {
  // 清理工作
});
</script>
